<template>
  <div class="client_list">
    <dl v-if="tishi" v-for="(item, key) in clientList" :key="key" @click="todetails(item.userId, item.shenfen)">
      <dt>
        <div class="client_list_img">
          <img :src="item.userPhoto" alt>
        </div>
        <div class="client_list_msg">
          <h5>
            {{item.userName}}
            <mark v-if="item.grade" :class="'c' + key">{{item.grade}}</mark>
          </h5>
          <div class="client_list_msg_num">
            <span>服务单数：{{item.count}}</span>
            <span>服务总金额：￥{{item.shenfen == 1 ? item.masterGetPrice : item.totalPrice}}</span>
          </div>
          <div class="createTime">入驻时间：{{item.createTime}}</div>
        </div>
      </dt>
      <dd>我的分账：￥{{(item.shenfen == 1 ? item.masterGetPrice : item.totalPrice)/10}}</dd>
    </dl>
    <div v-if="tishi" class="more" @click="loadMore">{{more}}</div>
    <blank v-if="!tishi" :title="'暂未邀请大师'"></blank>
  </div>
</template>

<script>
import Vue from "vue";
import { Selector } from "vux";
Vue.component("selector", Selector);
import blank from '@/components/masterInfo/blank'
export default {
  name: "clientMaster",
  components: {
    blank
  },
  data() {
    return {
      offset: 0,
      limit: 5,
      clientList: [],
      tishi: true,
      more: '加载更多'
    };
  },
  methods: {
    operator_next() {
      let params = {
        userId: this.$store.state.userId,
        offset: this.offset,
        limit: this.limit,
        shenfen: 1
      };
      this.$http.fetchGet("operator_next", params).then(
        res => {
          if (res.code == 200) {
            if (this.offset == 0) this.clientList = res.data;
            else this.clientList.push(...res.data);
            if (res.data.length == 0) this.offset -= this.limit;
            this.tishi = this.clientList.length > 0 ? true : false
          } else {
			      // this.$vux.toast.text("无更多数据");
			      this.more = '加载完毕'
          }
        },
        err => {}
      );
    },
    todetails(uId, uType) {
      this.$router.push({
        path: "/clientDetails",
        query: {
          uId: uId,
          uType: uType
        }
      });
    },
	loadMore() {
		this.offset += this.limit;
		this.operator_next()
	}
  },
  created() {
    this.operator_next();
  }
};
</script>

<style lang="less" scoped>
.client_list {
  dl {
    background: #fff;
    .mb(20);
    dt {
      .p(20);
      display: flex;
      .client_list_img {
        .w(180);
        .h(180);
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .client_list_msg {
        .pl(20);
        h5 {
          .lh(60);
          .f30;
          font-weight: normal;
          mark {
            .f18;
            color: #ffffff;
            .bri(5);
            .ml(15);
            .pt(3);
            .pb(3);
            .pl(8);
            .pr(8);
            &.c0 {
              background-color: #ff607a;
            }
            &.c1 {
              background-color: #fead58;
            }
            &.c2 {
              background-color: #59d3ac;
            }
            &.c3 {
              background-color: #37c5e2;
            }
            &.c4 {
              background-color: #9dc3e6;
            }
            &.busy {
              background-color: rgb(237, 126, 85);
            }
          }
        }
        .client_list_msg_num {
          .lh(60);
          .f28;
          span {
            .mr(10);
          }
        }
        .createTime {
          .lh(60);
          .f28;
          color: #999;
        }
      }
    }
    dd {
      .lh(88);
      .pl(20);
      border-top: 1px solid #f2f2f2;
    }
  }
  .more {
    text-align: center;
    color: @primary;
    background: #fff;
    .lh(80);
  }
}
</style>
